<template>
  <div class="time-beds" ref="timeBeds" :style="{ width: width }">
    <div class="flex head">
      <div class="cell" v-for="bed in beds" :key="bed">
        <img src="@/assets/img/bed.png" alt="" />
        床位{{ bed }}
      </div>
    </div>
    <div class="panels" ref="panels" draggable="false">
      <div v-for="(vertical, i) in panels" :key="'bed' + i" class="vertical">
        <div v-for="(cell, j) in vertical" :key="i + '-' + j" class="cell" :class="{
          use: cell.use,
          recent_before: cell.recent_before,
          before_day: isBeforeDay,
          after_day: isAfterDay,
          hover: cell.hover
        }" draggable="false" @click="cellClick(cell)" @dragenter="$emit('cell-dragenter', cell)"
          @mouseenter="onMouseenter(cell)" @mouseleave="onMouseleave(cell)">
          <template v-if="!cell.recent_before && !isBeforeDay">
            <div v-if="hasDisable(cell)" class="disable-tips">
              老师/床位不足<br />
              无法预约
            </div>
            <div v-else>
              <el-button v-if="cell.hover" class="btn" type="text" icon="el-icon-plus">
                添加预约
              </el-button>
              <span v-else class="leisure">空闲</span>
            </div>
          </template>
        </div>
      </div>
      <!-- 最近时间 -->
      <div v-if="isToday && !!beds" class="recent-time" :style="{ top: recentTime.top + 'px' }">
        <div class="time">
          最近时间<br />
          {{ recentTime.time }}
        </div>
      </div>
      <slot></slot>
    </div>
    <cl-empty v-if="!beds">
      <template #tips>门店“{{ shop.dept_name }}”还未配置床位，<el-button type="text" @click="$emit('to-shop')">
          前往配置
        </el-button>
      </template>
    </cl-empty>
  </div>
</template>
<script>
export default {
  props: {
    panels: {
      type: Array,
      default: () => []
    },
    condition: {
      type: Object,
      default: () => ({
        teacher: 0,
        bed: 0
      })
    },
    beds: {
      type: Number,
      default: 0
    },
    recentTime: {
      type: Object,
      default: () => ({})
    },
    shop: {
      type: Object,
      default: () => ({})
    },
    isToday: Boolean,
    isBeforeDay: Boolean,
    isAfterDay: Boolean
  },
  computed: {
    width() {
      if (!this.beds) {
        return "calc(100% - 150px)";
      }
      return this.beds * 110 + "px";
    }
  },
  methods: {
  
    hasDisable(cell) {
      const { teacher } = this.condition;
      if (!teacher) return true;
      return cell.bed > teacher;
    },
    cellClick(cell) {
      if (this.hasDisable(cell)) return;
      this.$emit("cell-click", cell);
    },
    onMouseenter(cell) {
      if (this.hasDisable(cell)) return;
      cell.hover = true;
      this.$emit("cell-mouseenter", cell);
    },
    onMouseleave(cell) {
      cell.hover = false;
      this.$emit("cell-mouseleave", cell);
    }
  }
};
</script>
<style lang="scss" scoped>
.time-beds {
  position: absolute;
  top: 0px;
  left: 120px;
  padding-right: 100px;
  text-align: center;
  width: 100%;

  .panels {
    position: relative;
    display: flex;
    user-select: none;
  }

  .cell {
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }
  }

  .head {
    position: sticky;
    top: 0;
    z-index: 9;
    background: #fff;
    // box-shadow: 1px 0 0 0 #fff, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #fff, inset 1px 0 0 0 #fff,
    // 	inset 0 1px 0 0 #fff;
    // user-select: none;
    margin-bottom: 20px;

    .cell {
      height: 30px;
      line-height: 30px;
    }
  }

  .vertical {
    .cell {
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
        inset 1px 0 0 0 #e8e8e8, inset 0 1px 0 0 #e8e8e8;
      cursor: pointer;
      position: relative;

      .disable-tips {
        cursor: not-allowed;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #f8f8fc;
        box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
          inset 1px 0 0 0 #e8e8e8, inset 0 1px 0 0 #e8e8e8;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #c1c1c1;
        overflow: hidden;
      }

      .leisure {
        font-size: 16px;
        color: #c1c1c1;
      }

      &.recent_before,
      &.before_day {
        background: #f8f8fc;
        cursor: not-allowed;
      }
    }
  }

  .recent-time {
    position: absolute;
    width: calc(100% + 50px);
    border-top: solid 2px $color-primary;
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    height: 1px;

    .time {
      display: inline-block;
      position: relative;
      transform: translateX(50%);
      color: $color-primary;
      font-size: 14px;
      margin-top: 10px;

      &::before {
        content: "";
        position: absolute;
        top: -11px;
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: $color-primary;
      }
    }
  }
}
</style>
